<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 出差申请</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
  <script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.8/dist/handlebars.min.js"></script>
  <script src="../js/handlebars-helpers.js"></script>
  <script src="../js/templates.js"></script>
  <script src="../js/template-renderer.js"></script>
</head>
<body>
  <div class="device-container" id="app">
    <!-- 页面内容将通过JavaScript动态渲染 -->
  </div>

  <script>
    // 页面数据
    const pageData = {
      pageTitle: '出差申请',
      backUrl: 'finance.html',
      rightIcon: 'question-circle',
      activeTab: 'finance',
      departments: [
        { value: '1', text: '内科' },
        { value: '2', text: '外科' },
        { value: '3', text: '儿科' },
        { value: '4', text: '妇产科' },
        { value: '5', text: '急诊科' }
      ],
      travelTypes: [
        { value: '1', text: '会议' },
        { value: '2', text: '培训' },
        { value: '3', text: '学术交流' },
        { value: '4', text: '项目合作' },
        { value: '5', text: '其他' }
      ],
      approvalProcess: [
        { step: 1, title: '部门主任审批', person: '李主任' },
        { step: 2, title: '医院领导审批', person: '张院长' }
      ],
      ccPersons: [
        { name: '赵医生' }
      ]
    };

    // 页面内容模板
    const pageContentTemplate = Handlebars.compile(`
      <!-- 表单区域 -->
      <form class="p-4">
        <!-- 基本信息 -->
        <div class="card mb-4">
          <div class="card-header">
            <span>基本信息</span>
            <span class="text-red-500 text-sm">*必填</span>
          </div>
          <div class="card-body">
            {{> form-group label="申请标题" input-type="text" required=true placeholder="请输入申请标题"}}
            
            <div class="form-group">
              <label class="form-label">申请部门<span class="text-red-500">*</span></label>
              <div class="relative">
                <select class="form-control appearance-none">
                  <option value="">请选择申请部门</option>
                  {{#each departments}}
                    <option value="{{this.value}}">{{this.text}}</option>
                  {{/each}}
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                  <i class="fas fa-chevron-down text-gray-400"></i>
                </div>
              </div>
            </div>
            
            {{> form-group label="出差地点" input-type="text" required=true placeholder="请输入出差地点"}}
            
            <div class="form-group">
              <label class="form-label">出差类型<span class="text-red-500">*</span></label>
              <div class="relative">
                <select class="form-control appearance-none">
                  <option value="">请选择出差类型</option>
                  {{#each travelTypes}}
                    <option value="{{this.value}}">{{this.text}}</option>
                  {{/each}}
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                  <i class="fas fa-chevron-down text-gray-400"></i>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <label class="form-label">出差日期<span class="text-red-500">*</span></label>
              <div class="flex items-center">
                <div class="relative flex-1">
                  <input type="date" class="form-control" required>
                </div>
                <span class="mx-2">至</span>
                <div class="relative flex-1">
                  <input type="date" class="form-control" required>
                </div>
              </div>
            </div>
            
            {{> form-group label="预计费用(元)" input-type="number" required=true placeholder="请输入预计费用"}}
            
            {{> form-group label="出差事由" input-type="textarea" required=true placeholder="请详细描述出差事由..."}}
          </div>
        </div>
        
        <!-- 交通信息 -->
        <div class="card mb-4">
          <div class="card-header">
            <span>交通信息</span>
          </div>
          <div class="card-body">
            <div class="form-group">
              <label class="form-label">交通方式</label>
              <div class="flex flex-wrap">
                <div class="mr-4 mb-2">
                  <input type="checkbox" id="plane" class="mr-1">
                  <label for="plane">飞机</label>
                </div>
                <div class="mr-4 mb-2">
                  <input type="checkbox" id="train" class="mr-1">
                  <label for="train">火车</label>
                </div>
                <div class="mr-4 mb-2">
                  <input type="checkbox" id="bus" class="mr-1">
                  <label for="bus">汽车</label>
                </div>
                <div class="mr-4 mb-2">
                  <input type="checkbox" id="taxi" class="mr-1">
                  <label for="taxi">出租车</label>
                </div>
                <div class="mr-4 mb-2">
                  <input type="checkbox" id="other" class="mr-1">
                  <label for="other">其他</label>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <label class="form-label">是否需要预订</label>
              <div class="flex">
                <div class="mr-4">
                  <input type="radio" name="booking" id="booking-yes" class="mr-1">
                  <label for="booking-yes">是</label>
                </div>
                <div>
                  <input type="radio" name="booking" id="booking-no" class="mr-1" checked>
                  <label for="booking-no">否</label>
                </div>
              </div>
            </div>
            
            {{> form-group label="交通备注" input-type="textarea" placeholder="请输入交通相关备注信息..."}}
          </div>
        </div>
        
        <!-- 住宿信息 -->
        <div class="card mb-4">
          <div class="card-header">
            <span>住宿信息</span>
          </div>
          <div class="card-body">
            <div class="form-group">
              <label class="form-label">是否需要住宿</label>
              <div class="flex">
                <div class="mr-4">
                  <input type="radio" name="accommodation" id="accommodation-yes" class="mr-1" checked>
                  <label for="accommodation-yes">是</label>
                </div>
                <div>
                  <input type="radio" name="accommodation" id="accommodation-no" class="mr-1">
                  <label for="accommodation-no">否</label>
                </div>
              </div>
            </div>
            
            {{> form-group label="住宿天数" input-type="number" placeholder="请输入住宿天数"}}
            
            <div class="form-group">
              <label class="form-label">是否需要预订</label>
              <div class="flex">
                <div class="mr-4">
                  <input type="radio" name="hotel-booking" id="hotel-booking-yes" class="mr-1">
                  <label for="hotel-booking-yes">是</label>
                </div>
                <div>
                  <input type="radio" name="hotel-booking" id="hotel-booking-no" class="mr-1" checked>
                  <label for="hotel-booking-no">否</label>
                </div>
              </div>
            </div>
            
            {{> form-group label="住宿备注" input-type="textarea" placeholder="请输入住宿相关备注信息..."}}
          </div>
        </div>
        
        <!-- 差旅标准提示 -->
        {{> alert title="差旅标准提醒" content="请注意遵守公司差旅标准，超标部分将不予报销。" type="info" link-text="查看标准" link-url="travel_standard.html"}}
        
        <!-- 审批流程 -->
        <div class="card mb-4">
          <div class="card-header">
            <span>审批流程</span>
          </div>
          <div class="card-body p-0">
            {{#each approvalProcess}}
              <div class="list-item">
                <div class="flex items-center">
                  <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                    <span class="text-blue-500">{{this.step}}</span>
                  </div>
                  <div>
                    <div class="font-medium">{{this.title}}</div>
                    <div class="text-xs text-gray-500">{{this.person}}</div>
                  </div>
                </div>
              </div>
            {{/each}}
          </div>
        </div>
        
        <!-- 抄送人 -->
        <div class="card mb-4">
          <div class="card-header">
            <span>抄送人</span>
          </div>
          <div class="card-body">
            <div class="flex flex-wrap">
              {{#each ccPersons}}
                <div class="flex items-center bg-gray-100 rounded-full px-3 py-1 mr-2 mb-2">
                  <span class="text-sm">{{this.name}}</span>
                  <i class="fas fa-times-circle ml-1 text-gray-500"></i>
                </div>
              {{/each}}
              <button class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-500 mb-2">
                <i class="fas fa-plus"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="flex space-x-4 mb-4">
          {{> button text="保存草稿" type="outline" full-width=true}}
          {{> button text="提交申请" type="primary" full-width=true}}
        </div>
      </form>
    `);

    // 注册部分模板
    Handlebars.registerPartial('status-bar', document.getElementById('status-bar-template').innerHTML);
    Handlebars.registerPartial('nav-bar', document.getElementById('nav-bar-template').innerHTML);
    Handlebars.registerPartial('tab-bar', document.getElementById('tab-bar-template').innerHTML);
    Handlebars.registerPartial('form-group', document.getElementById('form-group-template').innerHTML);
    Handlebars.registerPartial('alert', document.getElementById('alert-template').innerHTML);
    Handlebars.registerPartial('button', document.getElementById('button-template').innerHTML);

    // 页面模板
    const pageTemplate = Handlebars.compile(`
      {{> status-bar}}
      
      {{> nav-bar back-url=backUrl title=pageTitle right-icon=rightIcon}}
      
      <div class="app-content">
        ${pageContentTemplate.source}
      </div>
      
      {{> tab-bar active-tab=activeTab}}
    `);

    // 渲染页面
    document.getElementById('app').innerHTML = pageTemplate(pageData);
  </script>

  <!-- 组件模板 -->
  <script id="status-bar-template" type="text/x-handlebars-template">
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>
  </script>

  <script id="nav-bar-template" type="text/x-handlebars-template">
    <div class="nav-bar">
      <div class="nav-left">
        <a href="{{back-url}}"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">{{title}}</div>
      <div class="nav-right">
        {{#if right-icon}}
          <i class="fas fa-{{right-icon}}"></i>
        {{/if}}
      </div>
    </div>
  </script>

  <script id="tab-bar-template" type="text/x-handlebars-template">
    <div class="tab-bar">
      <a href="home.html" class="tab-item {{#if (eq active-tab 'home')}}active{{/if}}">
        <i class="fas fa-home tab-icon"></i>
        <span>首页</span>
      </a>
      <a href="asset.html" class="tab-item {{#if (eq active-tab 'asset')}}active{{/if}}">
        <i class="fas fa-laptop tab-icon"></i>
        <span>资产</span>
      </a>
      <a href="finance.html" class="tab-item {{#if (eq active-tab 'finance')}}active{{/if}}">
        <i class="fas fa-wallet tab-icon"></i>
        <span>财务</span>
      </a>
      <a href="material.html" class="tab-item {{#if (eq active-tab 'material')}}active{{/if}}">
        <i class="fas fa-box tab-icon"></i>
        <span>物资</span>
      </a>
      <a href="profile.html" class="tab-item {{#if (eq active-tab 'profile')}}active{{/if}}">
        <i class="fas fa-user tab-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </script>

  <script id="form-group-template" type="text/x-handlebars-template">
    <div class="form-group">
      <label class="form-label">{{label}}{{#if required}}<span class="text-red-500">*</span>{{/if}}</label>
      
      {{#if (eq input-type 'select')}}
        <div class="relative">
          <select class="form-control appearance-none" {{#if required}}required{{/if}}>
            <option value="">{{placeholder}}</option>
            {{#each options}}
              <option value="{{this.value}}">{{this.text}}</option>
            {{/each}}
          </select>
          <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
            <i class="fas fa-chevron-down text-gray-400"></i>
          </div>
        </div>
      {{else if (eq input-type 'textarea')}}
        <textarea class="form-control" rows="4" placeholder="{{placeholder}}" {{#if required}}required{{/if}}></textarea>
      {{else}}
        <input type="{{input-type}}" class="form-control" placeholder="{{placeholder}}" {{#if required}}required{{/if}}>
      {{/if}}
    </div>
  </script>

  <script id="alert-template" type="text/x-handlebars-template">
    <div class="bg-{{type}}-50 rounded-lg p-4 mb-4 flex items-start">
      <i class="fas fa-{{#if (eq type 'info')}}info-circle{{else if (eq type 'warning')}}exclamation-circle{{else if (eq type 'success')}}check-circle{{else if (eq type 'danger')}}exclamation-triangle{{/if}} text-{{type}}-500 mt-0.5 mr-2"></i>
      <div>
        <div class="text-sm font-medium text-{{type}}-{{#if (eq type 'warning')}}700{{else}}500{{/if}}">{{title}}</div>
        <div class="text-xs text-gray-600 mt-1">
          {{content}}
          {{#if link-text}}
            <a href="{{link-url}}" class="text-{{type}}-500">{{link-text}} &gt;</a>
          {{/if}}
        </div>
      </div>
    </div>
  </script>

  <script id="button-template" type="text/x-handlebars-template">
    <button type="button" class="btn btn-{{type}} {{#if full-width}}flex-1{{/if}} {{#if icon}}flex items-center justify-center{{/if}}" {{#if onclick}}onclick="{{onclick}}"{{/if}}>
      {{#if icon}}
        <i class="fas fa-{{icon}} {{#if text}}mr-2{{/if}}"></i>
      {{/if}}
      {{#if text}}
        <span>{{text}}</span>
      {{/if}}
    </button>
  </script>
</body>
</html> 